<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>快速创建地球</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
		<script type="text/javascript" src="../examples/assets/plugins/include-lib.js" include="jquery,jquery.range,bootstrap,admin-lte,haoutil,jquery.scrollTo,ace,lazyload"
		 libpath="../examples/assets/plugins/"></script>
		<link rel="stylesheet" href="../build/Widgets/widgets.css" type="text/css" />
		<link rel="stylesheet" href="../examples/assets/plugins/bootstrap/bootstrap-checkbox/awesome-bootstrap-checkbox.css"
		 type="text/css" />
		<link rel="stylesheet" href="../examples/assets/css/CEarth-Example.css" type="text/css" />

	</head>
	<body>
		<div id="cesiumContainer" class="fullWindow"></div>


    <!-- 面板 -->
    <div class="infoview">
      <table class="mars-table">
        <tr>
          <td>夸张程度</td>
          <td>
            <input id="txt_gradations"  type="range" min="1" max="80" step="0.1" value="10" onchange="changeVal()">
          </td>
        </tr>
      </table>
    </div>

		<script src="../build/Cesium.js"></script>
		<script src="../build/CEarth.js"></script>
		<script>
			//创建三维地球场景 
			var viewer = new CEarth.App('cesiumContainer', {
				scene: {
					center: {
						x: 102.833722,
						y: 24.881539,
						z: 50000,
						heading: 0,
						pitch: -90
					},
					showSun: true,
					showMoon: true,
					showSkyBox: true,
					showSkyAtmosphere: false,
					fog: true,
					fxaa: true,
					globe: {
						show: true,
						showGroundAtmosphere: false,
						depthTestAgainstTerrain: false,
						baseColor: '#546a53',
					},
					cameraController: {
						zoomFactor: 3.0,
						minimumZoomDistance: 1,
						maximumZoomDistance: 50000000,
						enableRotate: true,
						enableZoom: true,
					},
				},
				control: {
					baseLayerPicker: true, //basemaps底图切换按钮
					homeButton: true, //视角复位按钮
					sceneModePicker: true, //二三维切换按钮
					navigationHelpButton: true, //帮助按钮
					fullscreenButton: true, //全屏按钮
					timeline: false, //时间轴
					animation: false, //动画部件
				},
				terrain: {
					type: 'xyz',
					url: 'http://data.marsgis.cn/terrain',
				},
				basemaps: {}
			});

		  //修改地形夸张
		  viewer.scene.globe.terrainExaggeration = 10
		  $('#txt_gradations').range({
			onChange: function (value, bfb) {
			  viewer.scene.globe.terrainExaggeration = value
			},
		  })
		</script>
	</body>
</html>
